<script setup>

import ChooseDialog from "@/components/Asset/ChooseDialog.vue";
import RfidDialog from "@/components/Asset/RfidDialog/index.vue";

const props = defineProps({
  state: {
    type: Number,
    default: 0
  }
})

const { proxy } = getCurrentInstance();
const { asset_state } = proxy.useDict("asset_state");

const tableData = reactive({
  loading: false,
  list: []
});

const chooseDialog = ref();
const rfidDialog = ref();
let deletedList = [];

function showImg(img) {
  return import.meta.env.VITE_APP_BASE_API + img;
}

function handleChoose() {
  chooseDialog.value.open(props.state);
}

function handleRFID() {
  rfidDialog.value.open();
}

function pushInTableData(asset) {
  const tableDataList = tableData.list;
  const exist = tableDataList.find(item=>item.sourceId === asset.id);
  if (!exist) {
    let row = {...asset};
    row.sourceId = row.id;
    delete row.id;
    tableDataList.push(row);
  }
}

function onChooseSub(selected) {
  if (selected) {
    selected.forEach((item)=> {
      pushInTableData(item);
    })
  }
}

function onRfidSub(records) {
  if (records && records.length) {
    records.forEach((item)=> {
      pushInTableData(item);
    })
  }
}

function handleDelete({ row, $index }) {
  // 如果是编辑状态需要把删除的行存起来
  deletedList.push(row);
  tableData.list.splice($index, 1);
}

function getList() {
  return tableData.list;
}

function setList(list) {
  tableData.list = list;
  deletedList = [];
}

function getDeletedList() {
  return deletedList;
}

defineExpose({
  getList, setList, getDeletedList
})

</script>

<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button @click="handleChoose">选择资产</el-button>
      <el-button @click="handleRFID">RFID读取</el-button>
    </el-col>
  </el-row>
  <vxe-table height="250" ref="assetTableRef" :data="tableData.list">

    <vxe-column type="seq" width="55" align="center" />
    <vxe-column field="state" width="80" title="状态" align="center">
      <template #default="{ row }">
        <dict-tag :options="asset_state" :value="row.state" />
      </template>
    </vxe-column>
    <vxe-column width="120" title="图片" align="center">
      <template #default="{ row }">
        <el-tooltip v-if="row.imgUrl" class="box-item" effect="dark" placement="right-start">
          <template #content>
            <img alt="" :src="showImg(row.imgUrl)" width="100" height="100" />
          </template>
          <img alt="" :src="showImg(row.imgUrl)" width="30" height="30" />
        </el-tooltip>
        <span v-else>没有图片</span>
      </template>
    </vxe-column>
    <vxe-column field="number" width="120" title="资产编码" align="center"/>
    <vxe-column field="name" width="180" title="资产名称" align="center"/>
    <vxe-column field="categoryName" width="120" title="资产分类" align="center"/>
    <vxe-column field="rfid" width="290" title="RFID" align="center"/>
    <vxe-column field="brand" width="120" title="品牌" align="center"/>
    <vxe-column field="model" width="120" title="型号" align="center"/>
    <vxe-column field="buyWay" width="120" title="购置方式" align="center"/>
    <vxe-column field="buyTime" width="180" title="购置时间" align="center">
      <template #default="{ row }">
        <span>{{ row.buyTime }}</span>
      </template>
    </vxe-column>
    <vxe-column field="buyPrice" width="120" title="购置金额" align="center"/>
    <vxe-column field="userName" width="120" title="使用人" align="center"/>
    <vxe-column field="adminName" width="120" title="管理员" align="center"/>
    <vxe-column width="180" title="操作" fixed="right" align="center" class-name="small-padding fixed-width">
      <template #default="{ row }">
        <el-link
            size="primary"
            @click="handleDelete(row)"
        >删除</el-link>
      </template>
    </vxe-column>

  </vxe-table>
  <choose-dialog ref="chooseDialog" @sub="onChooseSub"></choose-dialog>
  <RfidDialog ref="rfidDialog" @sub="onRfidSub"></RfidDialog>
</template>

<style scoped lang="scss">

</style>